<script setup>
import { addReaderAPI } from '@/api/reader';
import { ref, reactive, watch, onMounted } from 'vue';

//4.0 组件通信
const props = defineProps({
  modelValue:{
    type:Boolean,
    required:true, // 根据实际情况决定是否必传
    default: false // 可选的默认值
  }
})
const emit = defineEmits(['update:modelValue'])
const handleInput = (e)=>{
  emit('update:modelValue',e.target.value)
}

// 4.1表单数据
const formData = ref({
  card: '',
  username: '',
  name: '',
  sex: '',
  phone: '',
  email: ''
});

// 4.2表单验证规则
const rules = ref({
  card: [
    { required: true, message: '请输入卡号', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 20, message: '长度在4到20个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
});
//4.3取消按钮
const closeDialog = ()=>{
emit('update:modelValue', false); // 正确方式：通过 emit 通知父组件
}
//4.4确定按钮
const submitForm = async ()=>{
  const res = await addReaderAPI(formData.value)
  if(res.data.code === 1){
    ElMessage.success(res.data.msg)
  }else{
    ElMessage.error('错误')
  }
emit('update:modelValue', false); // 正确方式：通过 emit 通知父组件
}

</script>

<template>
    <el-dialog
    v-model="props.modelValue"
    title="添加读者信息"
    width="600px"
    :close-on-click-modal="false"
    @closed="closeDialog"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="right"
    >
      <el-form-item label="卡号" prop="card">
        <el-input v-model="formData.card" placeholder="请输入读者卡号" clearable />
      </el-form-item>

      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" clearable />
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入读者姓名" clearable />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入手机号" clearable />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" placeholder="请输入邮箱" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>